import React from "react";
import { SearchBar, ConfigProvider, Button, Toast } from "@nutui/nutui-react";
import { list } from "./config";
import pImage from "../../images/1.webp";
import styles from "./index.module.scss";
import { history } from '@tarojs/router'
import Taro from "@tarojs/taro";

function Index() {
  const handleRedirect = () => {
    Taro.navigateTo({
      url: "pages/idCheck/index",
    });
  };

  return (
    <div>
      <ConfigProvider
        theme={{
          nutuiSearchbarBackground: "#2e70f2",
          nutuiSearchbarInputBackground: "#eee",
          nutuiSearchbarInputTextAlign: "LEFT",
        }}
      >
        <SearchBar onSearch={(value) => Toast.show(value)} />
      </ConfigProvider>
      {list.map((item) => {
        const { name, max, rate, way, period } = item;
        return (
          <div className={styles.card}>
            <div>
              <div className="flex">
                <img
                  src={pImage}
                  width={40}
                  height={40}
                  style={{ marginRight: 10 }}
                />
                <div>{name}</div>
              </div>
              <Button type="primary" onClick={handleRedirect}>
                立即申请
              </Button>
            </div>
            <div>
              <div className={styles.half}>
                <span>最高可借：</span>
                <span className={styles.red}>{max}</span>
              </div>
              <div className={styles.half}>
                <span>年化利率：</span>
                <span className={styles.text}>{rate}</span>
              </div>
            </div>
            <div>
              <span>还款方式：</span>
              <span className={styles.text}>{way}</span>
            </div>
            <div>
              <span>贷款周期：</span>
              <span className={styles.text}>{period}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default Index;
